<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dijit.focus Test</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../themes/tundra/tundra.css";
		@import "../css/dijitTests.css";
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.NumberSpinner");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.Menu");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.Editor");

		// This code does animation to change border color and width to show
		// active vs. non-active widgets.
		var queue=[];
		var animation;
		function animateBorderColor(widget, color, startWidth, endWidth){
			if(animation){
				queue.push(arguments);
				return;
			}
			with(widget.domNode.style){
				borderStyle="solid";
				outlineStyle="solid";

			}
			animation = dojo.animateProperty({
				node: widget.domNode,
				duration: 50,
				properties: {
					// depending on browser and node type, sometimes border or outline is ineffective.
					// doing both seems to work in all cases though (for at least one of them)
					borderColor: { end: color },
					borderWidth: { start: startWidth, end: endWidth },
					outlineColor: { end: color },
					outlineWidth: { start: startWidth, end: endWidth }
				},
				onEnd: function(){
					animation=null;
					if(queue.length){
						animateBorderColor.apply(null, queue.shift());
					}
				}
			});
			animation.play();
		}

		// This flag controls animation and can be disabled by the test harness in robot/focus_mouse.html
		animate = !window.location.search.match("animate=false");

		dojo.addOnLoad(function(){
			dojo.subscribe("widgetFocus", function(widget){
				console.log("focused on widget " + (widget?widget:"nothing"));
				if(animate){
					animateBorderColor(widget, "#ff0000", 1, 3);
				}
			});
			dojo.subscribe("widgetBlur", function(widget){
				console.log("blurred widget " + (widget?widget:"nothing"));
				if(animate){
					animateBorderColor(widget, "#0000ff", 3, 1);
				}
			});
			dojo.subscribe("focusNode", function(node){ console.log("focused on node " + (node?(node.id||node.tagName):"nothing"));});
		});
	</script>
	<style>
		div, fieldset, form, input {
			padding: 3px;
			margin: 3px;
			border: 1px solid blue;
		}
	</style>
</head>
<body style="background-color: #fff; color: black; padding: 0; margin: 0" class="claro">

	<h3>Widget Focus Test</h3>
	<p>
		This is for testing code to detect onBlur and onFocus on a widget level.<br>
		Focused widgets' borders will turn red.<br>
		Also, check the console log for focus and blur events on widgets.
	</p>

	<label for="fieldset1">a form ContentPane widget:</label><br>
	<form dojoType="dijit.layout.ContentPane" id="form">
		<label for="first">simple input: </label><input id=first><br>

		<label for="fieldset1">a fieldset ContentPane widget:</label><br>
		<fieldset id=fieldset1 dojoType="dijit.layout.ContentPane">
			<label for="select">a ComboBox widget:</label>
			<select id=select dojoType="dijit.form.ComboBox">
				<option>this</option>
				<option>is</option>
				<option>a</option>
				<option>list</option>
			</select>
			<label for="plain">a plain input:</label>
			<input id=plain value=plain>
		</fieldset>
		<div dojoType="dijit.Editor" id=editor>
			Hello world, this is an <i>editor</i>
		</div>
		<br>
		<label for="fieldset1">another fieldset ContentPane:</label><br>
		<fieldset id=fieldset2 dojoType="dijit.layout.ContentPane">
			<label for="date">a DateTextBox widget:</label>
			<input id=date dojoType="dijit.form.DateTextBox"><br>

			<label for="textarea">a plain textarea:</label><br>
			<textarea id=textarea>hello there!</textarea><br>

			<label for="spinner">a Spinner widget:</label>
			<input id=spinner dojoType="dijit.form.NumberSpinner" value=100><br>

			<label for="button">a Combobutton widget:</label>
			<div id=button dojoType="dijit.form.ComboButton" tabIndex=0>
				<span>push me</span>
				<div id=menu dojoType="dijit.Menu">
					<div id=mi1 dojoType="dijit.MenuItem">menu item 1</div>
					<div id=mi2 dojoType="dijit.MenuItem">menu item 2</div>
					<div id=popupMenuItem dojoType="dijit.PopupMenuItem">
						<span>submenu</span>
						<div id=submenu dojoType="dijit.Menu">
							<div id=smi1 dojoType="dijit.MenuItem">submenu item 1</div>
							<div id=smi2 dojoType="dijit.MenuItem">submenu item 2</div>
						</div>
					</div>
				</div>
			</div>
		</fieldset>
	</form>
</body>
</html>
